<template>
  <n-grid cols="1 s:1 m:1 l:4 xl:4 2xl:4" responsive="screen">
    <n-grid-item>
      <n-form :label-width="80" :model="formParams" :rules="rules" ref="formRef">

        <n-form-item label="押金" path="deposit">
          <n-input placeholder="请输入押金" v-model:value="formParams.deposit" />
        </n-form-item>

        <n-form-item label="充电宝成本" path="bankcost">
          <n-input placeholder="请输入充电宝成本" v-model:value="formParams.bankcost" />
        </n-form-item>

        <n-form-item label="属性" path="attr">
          <n-radio-group v-model:value="formParams.attr" name="attr" @update:value="attrChange" >
            <n-space>
              <n-radio :key="1" :value="1">分钟</n-radio>
              <n-radio :key="2" :value="2">小时</n-radio>
            </n-space>
          </n-radio-group>
        </n-form-item>

        <n-form-item label="计费标准" path="minute">
          <n-input placeholder="请输入" v-model:value="formParams.minute" /><div style="width: 170px;margin-left: 10px;">分钟收费</div>  <n-input placeholder="请输入金额" v-model:value="formParams.danjia" /><div style="margin-left: 10px;">元</div>
        </n-form-item>

        <n-form-item label="免费策略(几分钟内免费)" path="mianfei">
          <n-input placeholder="请输入分钟数" v-model:value="formParams.mianfei" />
        </n-form-item>

        <n-form-item label="封顶时长" path="maxshichang">
          <n-input placeholder="请输入封顶时长" v-model:value="formParams.maxshichang" />
        </n-form-item>

        <n-form-item label="封顶金额" path="maxmoney">
          <n-input placeholder="请输入封顶金额" v-model:value="formParams.maxmoney" />
        </n-form-item>

        <n-form-item label="每日最高消费" path="dayconsume">
          <n-input placeholder="请输入每日最高消费" v-model:value="formParams.dayconsume" />
        </n-form-item>

        <n-form-item label="可借充电宝电量" path="electricity">
          <n-input placeholder="请输入可借充电宝电量" v-model:value="formParams.electricity" />
        </n-form-item>
        
        <div>
          <n-space>
            <n-button type="primary" :loading="subLoading" @click="formSubmit">修改</n-button>
          </n-space>
        </div>
      </n-form>
    </n-grid-item>
  </n-grid>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { useMessage, FormRules } from 'naive-ui';
  import { deviceconfigEdit1,deviceconfiginfo1 } from '@/api/webconfig/index';
  
  const rules: FormRules = {
    deposit: {
      required: true,
      message: '请输入押金',
      trigger: 'blur',
    },
    bankcost: {
      required: true,
      message: '请输入冲充宝成本',
      trigger: 'blur',
    },
    minute: {
      required: true,
      message: '请输入计费标准',
      trigger: 'blur',
    },
    mianfei: {
      required: true,
      message: '请输入免费策略',
      trigger: 'blur',
    },
    maxshichang: {
      required: true,
      message: '请输入封顶时长',
      trigger: 'blur',
    },
    maxmoney: {
      required: true,
      message: '请输入封顶金额',
      trigger: 'blur',
    },
    dayconsume: {
      required: true,
      message: '请输入每日最高消费',
      trigger: 'blur',
    },
    electricity: {
      required: true,
      message: '请输入可借充电宝电量',
      trigger: 'blur',
    },
  };

  const defaultValueRef = () => ({
      deposit: '',
      bankcost: '',
      minute: '',
      danjia: '',
      mianfei: '',
      maxshichang: '',
      maxmoney: '',
      dayconsume: '',
      electricity: '',
      attr: 1
  });

  const message = useMessage();
  const formRef: any = ref(null);
  const subLoading = ref(false);
  const formParams = ref(defaultValueRef());

  function attrChange(e){
    // console.log("asdfjlkasjf");
    // console.log(e)
    formParams.value.attr=e;
  }

  function formSubmit() {
    formRef.value.validate((errors) => {
      if (!errors) {
        console.log("打印一下子提交信息")
        console.log(formParams.value);
        deviceconfigEdit1(formParams.value).then((_) => {
          message.success('更新成功');
        });
      } else {
        message.error('验证失败，请填写完整信息');
      }
    });
  }

  function getInfo() {
    deviceconfiginfo1({}).then((res) => {
      console.log(res);
      const params = {
        deposit: String(res.deposit),
        bankcost: String(res.bankcost),
        minute: String(res.minute),
        danjia: String(res.danjia),
        mianfei: String(res.mianfei),
        maxshichang: String(res.maxshichang),
        maxmoney: String(res.maxmoney),
        dayconsume: String(res.dayconsume),
        electricity: String(res.electricity)
      };
      formParams.value = Object.assign(formParams.value, params);
    });
  }


  onMounted(async () => {
    getInfo();
  });
</script>
